<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table#table{
				border: solid 2px darkcyan;
				border-collapse: collapse;
				width: 700px;
				text-align: center;
			}
			table#table tr,
			table#table tr th,
			table#table tr td{
				border: solid 1px darkcyan;
			}
			table#tab tr td a{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
			<!--1.面试题 cookie ,localStorage,sessionStorage区别?
 			2.完成之前页面的添加/删除/修改
  			3.将数据写入localStorage-->
		<pre>
		1.区别：
		 	共同点：都是保存在浏览器端、且同源的 
			区别： 
			1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，
			而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。
			cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下 
			
			2、存储大小限制也不同
			cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。
			sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 。
			
			3、数据有效期不同
			sessionStorage：仅在当前浏览器窗口关闭之前有效；
			localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
			cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭 
			
			4、作用域不同
			sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
			localstorage在所有同源窗口中都是共享的；
			cookie也是在所有同源窗口中都是共享的 
			
			5、web Storage支持事件通知机制，可以将数据更新的通知发送给监听者 
			
			6、web Storage的api接口使用更方便
		</pre>
		
		
		<div id="box">
			<div id="entry">
				<div id="user">
					<label>
						用户名:<input type="text" value="xiaowei" placeholder="请输入姓名"/>
					</label>
					<br />
					<label>
						年龄:<input type="number" value="18"/>
					</label>
				</div>
				<br />
				<div id="sex">
					<h4>性别：</h4>
					<label>
						男:<input type="radio" name="sex" value=0  />
					</label>	
					<label>
						女:<input type="radio" name="sex" value=1 checked />
					</label>
				</div>
				<br />
				<div id="hobby">
					<h4>爱好：</h4>
					<label>
						学习 <input type="checkbox" value="h1" />
					</label>
					<label>
						健身 <input type="checkbox" value="h2" />
					</label>
					<label>
						游泳 <input type="checkbox" value="h3" />
					</label>
					<label>
						工作 <input type="checkbox" value="h4" />
					</label>
					<label>
						看电影 <input type="checkbox" value="h5" />
					</label>
					<br />
					<br />
					<br />
					<div>
						<label>
							全选/全不选
							<input type="checkbox" id="checkAll"  />
						</label>
						
						<button type="button" id="notCheck">反选</button>
					</div>
				</div>
				<br />
				<br />
				<div id="education">
					<b>学历:</b><br />
					<select>
						<option value="e1">小学</option>
						<option value="e2">中学</option>
						<option value="e3">高中</option>
						<option value="e4">大学</option>
					</select>
				</div>
				<br />
				<div>
					<button type="button" onclick="add()">添加</button>
				</div>
			</div>
			<br />
			<br />
			<div id="show">
				<table id="table">
					<thead id="thead">
						<tr>
							<th>序号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>性别</th>
							<th>学历</th>
							<th>爱好</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<!--<tr>
							<td>1</td>
							<td>xiaowei</td>
							<td>18</td>
							<td>女士</td>
							<td>大学</td>
							<td>学习,健身,游泳,工作,看电影</td>
							<td>
								<a onclick=upd({id:1})>编辑</a> /
								<a onclick=del(i)>删除</a>
							</td>
						</tr>-->
					</tbody>
				</table>
			</div>
		</div>
		<script type="text/javascript">
			var arr=[];//存放用户信息
			
			//添加数据
			function add () {
				var userIpts=document.querySelectorAll("div#user>label input");
				var user=userIpts[0].value;
				var age=userIpts[1].value;
				localStorage.user=user;
				localStorage.age=age;
				var educationSleect=document.querySelectorAll("#education>select");
				if (user&&age) {
					var sex=getUserSex();
					var hobby=getUserHobby();
					var education=educationSleect.value;
					var obj={
						id:+new Date(),
						user:user,
						age:age,
						sex:sex,
						hobby:hobby,
						education:education
					}
					arr.push(obj);
					console.log("最新数据:",arr);
					showPage(arr);
				}else{
					alert("用户名和年龄不能为空");
				}
			}
			
			//获取用户输入的性别
			function getUserSex () {
				var sexIpts=document.querySelectorAll("div#sex>label input");
				var sex;
				if(sexIpts[1].checked){
					sex=sexIpts[1].value;
				}else{
					sex=sexIpts[0].value;
				}
				localStorage.sex=sex;
				return sex;
			}
			
			//获取用户的选取的爱好
			function getUserHobby(){
				var hobbyIpts=document.querySelectorAll("div#hobby>label>input");
				var hobby=[];
				for (var i=0;i<hobbyIpts.length;i++) {
					if(hobbyIpts[i].checked){
						hobby.push(hobbyIpts[i].value);
					}
				}
				return hobby;
			}
			
			// 全选/全不选
			var checkAll=document.getElementById("checkAll");
			checkAll.onclick=function(){
				var f=this.checked;
				var ipts=document.querySelectorAll("div#hobby>label>input");
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked=f;//代表当前这个复选框被选中
				}
			}
			
			//反选
			var notCheck=document.getElementById("notCheck");
			notCheck.onclick=function(){
				var ipts=document.querySelectorAll("div#hobby>label>input");
				for(var i=0;i<ipts.length;i++){
					ipts[i].checked= !ipts[i].checked;//当前这个复选框取反
				}
				fn1();
			}
			
			//是否需要选中 全选
			var ipts=document.getElementById("notCheck");
			for(var i=0;i<ipts.length;i++){
				ipts[i].onclick=function(){
					fn1();
				}
			}
			
			function fn1 () {
				var f=true;
				for (var a=0;a<ipts.length;a++) {
					if (!ipts[a].checked) {
						f=false;
						break;
					}
				}
				checkAll.checked=f;
			}
			
			//渲染页面(table)
			function showPage(arr){
				var tbody=document.getElementById("tbody");
				tbody.innerHTML="";
				var trs="";
				for(var i=0;i<arr.length;i++){
					trs+=`
						<tr>
							<td>${i}</td>
							<td>${arr[i].user}</td>
							<td>${arr[i].age}</td>
							<td>${arr[i].sex=="0"?"先生":"女士"}</td>
							<td>${setEducation(arr[i].education)}</td>
							<td>${setHobby(arr[i].hobby)}</td>
							<td>
								<a onclick=upd(${JSON.stringify(arr[i])})>编辑</a>
								<a onclick=del(${arr[i].id})>删除</a>
							</td>
						</tr>
					`;
				}
				tbody.innerHTML=trs;
			}
			
			//编辑
			function upd(obj){
				console.log("你要修改的数据:",obj);
			}
			
			//删除
//			function del(id){
//				console.log("你要删除的id:",id);
//			}
			
			//删除
			function del(obj) {
				//用id去删除
				console.log(obj);

				var id = arr[obj].id;

				console.log(id);
				console.log(arr);
				for (var i = 0; i < arr.length; i++) {
					if (id == arr[i].id) {
						arr.splice(i, 1);
					}
				}
				localStorage.arr = JSON.stringify(arr);
				showPage(arr);
			}
			//返回学历
			function setEducation(attr){
				var obj={
					e1:"小学",
					e2:"中学",
					e3:"高中",
					e4:"大学",
				}
				console.log("attr:",attr,"obj["+attr+"]:",obj[attr]);
				return obj[attr];
			}
			
			
			//返回爱好
			function setHobby(arr){
				console.log("arr:",arr);
				var obj={
					h1:"学习",
					h2:"健身",
					h3:"游泳",
					h4:"工作",
					h5:"看电影",
				}
				var str="";
				for(var i=0;i<arr.length;i++){
					if(i==arr.length-1){
						str+=obj[arr[i]];
					}else{
						str+=obj[arr[i]]+","
					}
				}
				console.log("str:",str)
				return str;
			}
			
			function educationSleected() {
				var educationSleected = document.getElementById("educationSleected");
				var educationSleect = document.querySelector("#education>select")
				educationSleect[i].selected = true;

			}
			//localStorage.arr=JSON.stringify(arr);
			//sessionStorage.arr=JSON.stringify(arr);
		</script>
		
	</body>
</html>
